<template>
	<!-- 订单中心 -->
	<view class="wp">
		<view class="nav_bar">
			<view class="bar1">
				<text :class="{'active':barIdx1===0}" @click="changeType(0,3)">线下账单</text>
				<text :class="{'active':barIdx1===1}" @click="changeType(1,3)">商城订单</text>
				<text :class="{'active':barIdx1===2}" @click="changeType(2,3)">团购订单</text>
			</view>
			<view class="select_time" v-if="barIdx1===0">
				<view class="time" @click="openDatetimePicker">
					<text class="time_num">{{timeVstr}}</text>
					<text class="yticon icon-you"></text>
				</view>
				<text class="money">本月实付 {{xianMoney}}</text>
			</view>
			<view class="bar2" v-if="barIdx1===1">
				<text :class="{'active':typeIdx===''}" @click="changeType('',1)">全部</text>
				<text :class="{'active':typeIdx===0}" @click="changeType(0,1)">待付款</text>
				<text :class="{'active':typeIdx===1}" @click="changeType(1,1)">待发货</text>
				<text :class="{'active':typeIdx===2}" @click="changeType(2,1)">待收货</text>
				<text :class="{'active':typeIdx===3}" @click="changeType(3,1)">已完成</text>
			</view>
			<view class="serch" v-if="barIdx1===1">
				<view @click="$navTo('../order/ordersearch')">
					<image src="../../static/ss.png" mode=""></image>
					<text>搜索订单</text>
				</view>
			</view>
			<view class="bar2" v-if="barIdx1===2">
				<text :class="{'active':typeIdx2===0}" @click="changeType(0,2)">未支付</text>
				<text :class="{'active':typeIdx2===1}" @click="changeType(1,2)">未核销</text>
				<text :class="{'active':typeIdx2===3}" @click="changeType(3,2)">已核销</text>
			</view>
		</view>
		<view class="body" :class="{'setTop':barIdx1===0||barIdx1===2}">
			<zi-order v-if="barIdx1===0" :list.sync="list" :isloading="isloading" :ismore="ismore"></zi-order>
			<my-order v-if="barIdx1===1" :list.sync="list" :isloading="isloading" :ismore="ismore"></my-order>
			<write-off v-if="barIdx1===2" :list.sync="list" :isloading="isloading" :ismore="ismore"></write-off>
		</view>
		<simple-datetime-picker ref="myPicker" :startYear="2023" :endYear="endYear"
			@submit="handleSubmit"></simple-datetime-picker>
	</view>
</template>

<script>
	import ziOrder from './components/zi-order.vue'
	import myOrder from './components/myorder.vue';
	import writeOff from './components/write-off.vue';
	import SimpleDateTimePicker from '@/components/simple-datetime-picker/simple-datetime-picker.vue'
	export default {
		components: {
			ziOrder,
			myOrder,
			writeOff,
			SimpleDateTimePicker
		},
		data() {
			let date = new Date(),
				year = date.getFullYear(),
				month = date.getMonth() + 1,
				timeV = year + '-' + month,
				timeVstr = year + '年' + month + '月';
			return {
				barIdx1: 0,
				endYear: year,
				timeV,
				timeVstr,

				typeIdx: '',
				typeIdx2: 1,

				xianMoney: '',

				isloading: false,
				ismore: true,
				page: 0,
				list: [],
			}
		},
		onShow() {
			this.barIdx1=uni.getStorageSync('upOrderType')?uni.getStorageSync('upOrderType'):this.barIdx1;
			try {
				uni.removeStorageSync('upOrderType');
			} catch (e) {}
			this.page = 0;
			this.list = [];
			this.getList();
		},
		onReachBottom() {
			this.getList();
		},
		methods: {
			getZorderList() {
				this.page++;
				this.isloading = true;
				this.ismore = true;
				this.$axios('Lists/zorder', "POST", 'order', {
					status: this.typeIdx2,
					page: this.page
				}).then(res => {
					this.isloading = false;
					if (res.data.code == 200) {
						this.list = [...this.list, ...res.data.data.list];
						this.ismore = res.data.data.list.length > 0;
					}
				})
			},
			getXianxiaList() {
				this.page++;
				this.isloading = true;
				this.ismore = true;
				this.$axios('transLog/trans', 'POST', 'bonus', {
					month: this.timeV,
					page: this.page,
				}).then(res => {
					this.isloading = false;
					if (res.data.code == 200) {
						this.xianMoney = res.data.data.money;
						this.list = [...this.list, ...res.data.data.list];
						this.ismore = res.data.data.list.length > 0;
					}
				})
			},
			getMyOrderList() {
				this.page++;
				this.isloading = true;
				this.ismore = true;
				this.$axios('Lists/display', "POST", 'order', {
					status: this.typeIdx,
					page: this.page
				}).then(res => {
					this.isloading = false;
					if (res.data.code == 200) {
						this.list = [...this.list, ...res.data.data.list];
						this.ismore = res.data.data.list.length > 0;
					}
				})
			},
			getList() {
				if (this.barIdx1 === 0) {
					this.getXianxiaList();
				}
				if (this.barIdx1 === 1) {
					this.getMyOrderList();
				}
				if (this.barIdx1 === 2) {
					this.getZorderList();
				}
			},
			openDatetimePicker() {
				this.$refs.myPicker.show();
			},
			handleSubmit(e) {
				this.timeV = `${e.year}-${e.month}`;
				this.timeVstr = `${e.year}年${e.month}月`;
				this.page = 0;
				this.list = [];
				this.getXianxiaList();
			},
			changeType(v, type) {
				switch (type) {
					case 1:
						if (v === this.typeIdx) return;
						this.typeIdx = v;
						break;
					case 2:
						if (v === this.typeIdx2) return;
						this.typeIdx2 = v;
						break;
					case 3:
						if (v === this.barIdx1) return;
						this.barIdx1 = v;
						break;
				}
				this.page = 0;
				this.list = [];
				this.getList();
			}
		}
	}
</script>

<style lang="scss">
	page {
		background: #f2f2f2;
	}

	.nav_bar {
		background: #fff;
		position: fixed;
		width: 100%;
		z-index: 100;

		.bar1,
		.bar2 {
			border-bottom: 1px hsl(0, 0%, 87%) solid;
			color: #000;
			font-weight: bold;
			display: flex;
			align-items: center;
			line-height: 75upx;
			text-align: center;

			text {
				flex: 1;
				position: relative;
			}

			.active {
				background: $bg-color;
				color: #fff;
				font-weight: bold;
			}
		}

		.bar2 {
			border: none;
			line-height: 75upx;
			font-weight: normal;

			.active {
				background: #fff;
				color: $bg-color;
			}

			.active::after {
				border-bottom: 2px $bg-color solid;
				content: '';
				position: absolute;
				bottom: 0;
				left: 50%;
				transform: translateX(-50%);
				width: 80%;
			}
		}



		.select_time {
			color: #000;
			display: flex;
			align-items: center;
			justify-content: space-between;
			font-size: 32upx;
			font-weight: bold;
			letter-spacing: 1px;
			padding: 0 20upx;
			line-height: 75upx;

			.time {
				margin-right: 20upx;

				.icon-you {
					display: inline-block;
					transform: rotateZ(90deg);
				}
			}
		}

		.serch {
			view {
				background: rgba(231, 231, 231, .7);
				border-radius: 20px;
				color: #666;
				display: flex;
				align-items: center;
				justify-content: center;
				font-size: 32upx;
				height: 70upx;
				margin: 15upx 20upx;

				image {
					height: 40upx;
					margin-right: 20upx;
					width: 40upx;
				}
			}
		}
	}

	.body {
		padding-top: 250upx;
	}

	.setTop {
		padding-top: 150upx;
	}
</style>